<route lang="json5"></route>

<script setup lang="ts">
import ViewContainer from "@/layouts/ViewContainer.vue";
import titleConfig from "./edit.title";
import Form from "@/components/StorageForm/index";
import { useMessage } from "wot-design-uni";
import { storageService } from "@/service/storage";
import Spin from "@/components/Spin/index.vue";
import { useToastStore } from "@/store";

const Basic = Form.BasicForm;
const List = Form.ScanListForm;
const Row = Form.CommonRow;

const message = useMessage();
const toastStore = useToastStore();

const loading = ref(false);

const currentId = ref();

const basicRef = ref(null);
const scanList = ref([]);

const checkNumber = ref(true);

const init = async (id) => {
	loading.value = true;
	currentId.value = id;
	try {
		const rs = await storageService.getCardDetail(id);
		if (rs) {
			console.log(rs);
			scanList.value = rs.logisticsDetailList.map((item) => {
				return {
					id: item.id,
					mainOrderNumber: item.mainOrderNumber,
					packageNumber: item.outPackageQuantity ?? 0,
					allPackageNumber: item.outPackageQuantity ?? 0,
					weight: item.weight,
					transportationRoute: item.transportationRoute,
					trap: item.palletQuantity ?? 0,
					allTrapNumber: item.palletQuantity ?? 0,
				};
			});

			/* rs.transportStatus;
			basicInfo.seal = rs.seal;
			basicInfo.purchaseOrder = rs.purchaseOrder;
			basicInfo.trailer = rs.trailer; */

			basicRef.value?.setValues({
				carrier: rs.carrier,
				name: rs.name,
				phone: rs.phone,
				trainNumber: rs.trainNumber,
				seal: rs.seal,
				purchaseOrder: rs.purchaseOrder,
				trailer: rs.trailer,
			});
			return;
		}
	} catch (error) {
		console.log(error);
	} finally {
		loading.value = false;
	}
};

const totalConfig = computed(() => {
	const _d = scanList.value;

	const total = _d.length;
	let totalPackageNumber = 0;
	let totalWeight = 0;
	let totalTrapNumber = 0;

	_d.forEach((item) => {
		totalPackageNumber += item.packageNumber;
		totalWeight += item.weight;
		totalTrapNumber += item.trap;
	});

	return [
		{
			label: "总计:",
			value: total,
		},
		{
			label: "总包装数:",
			value: totalPackageNumber,
		},
		{
			label: "总重:",
			value: totalWeight,
		},
		{
			label: "总托盘数:",
			value: totalTrapNumber,
		},
	];
});

// 返回
const handleBack = () => {
	uni.navigateBack();
};

// 确认
const handleConfirm = async () => {
	loading.value = true;
	try {
		const formRs = await basicRef.value?.validate();
		if (!formRs || !formRs.valid) {
			loading.value = false;
			// message.alert("基础信息未填写完整");
			toastStore.set("基础信息未填写完整", "error");
			return;
		}
		if (scanList.value.length === 0) {
			loading.value = false;
			// message.alert("暂无出库信息");
			toastStore.set("暂无出库信息", "error");
			return;
		}

		const _logisticsList = scanList.value.map((item) => ({
			id: item.id,
			mainOrderNumber: item.mainOrderNumber,
			outPackageQuantity: item.packageNumber,
			weight: item.weight,
			transportationRoute: item.transportationRoute,
			palletQuantity: item.trap,
		}));

		const params = {
			id: currentId.value,
			...basicRef.value?.getValues(),
			logisticsDetailList: _logisticsList,
			check: checkNumber.value
		};

		const rs = await storageService.updateCard(params);
		if (rs) {
			// message.alert("编辑成功");
			toastStore.set("编辑成功", "success");

			setTimeout(() => {
				uni.navigateBack();
			}, 2000);
		}
	} catch (error) {
		console.log(error);

		if (error.msg && error.msg.includes("数量不足")) {
			message.confirm({
				title: "确认修改此车单？",
			}).then(() => {
				checkNumber.value = false;
				handleConfirm();
			}).catch(() => {
				loading.value = false;
			});
		}
	} finally {
		setTimeout(() => {
			loading.value = false;
		}, 4000)
	}
};

onLoad((options) => {
	console.log("opt:", options);
	const id = options.id;
	init(id);
});
</script>

<template>
	<ViewContainer :title="titleConfig" innerClass="outbound-page">
		<Spin :loading="loading" full>
			<Basic ref="basicRef" :showTitle="true" type="edit" />
			<Row :config="totalConfig" class="mt" />
			<List title="出库信息" v-model:value="scanList" class="mt" />

			<view class="btn-group">
				<wd-button @click="handleBack" class="btn back" type="info" :round="false">返回</wd-button>
				<wd-button @click="handleConfirm" class="btn confirm" :round="false">确认</wd-button>
			</view>
		</Spin>
	</ViewContainer>
</template>

<style lang="less">
:deep(.outbound-page) {
	.mt {
		margin-top: 30px;
	}

	.btn-group {
		display: flex;
		justify-content: center;
		margin: 50px 0;

		.btn {
			width: 45%;
			height: 100px;
		}
	}
}
</style>
